<template>
  <div class="Progress-neg-container">
    <div class="language-select">
      <div class="title">Sentiments</div>
      <div style="display: flex; align-items: end">
        <div>
          <CustomDropdownc
            v-model="selectedSentiments"
            :options="senTypeOptions"
            @change="handleSentimentChange"
            prefix-text="Select Source"
          />
        </div>
      </div>
    </div>
    <div class="chart-container">
      <PieChart :option="SenChartOptions" :height="'1.4375rem'"></PieChart>
    </div>
  </div>
</template>

<script>
import CustomDropdownc from "./CustomDropdownc.vue";
import PieChart from "@components/common/PieChart.vue"; // 注意：实际使用柱状图配置，需确认组件类型

export default {
  components: { PieChart, CustomDropdownc },
  data() {
    return {
      // 日期选择器配置（保留注释，如需启用可取消注释）
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now(); // 禁止选择未来日期
        },
        shortcuts: [
          {
            text: "今天",
            onClick: (picker) => picker.$emit("pick", new Date()),
          },
          {
            text: "昨天",
            onClick: (picker) => {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick: (picker) => {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      selectedDate: "", // 日期选择器绑定值
      selectedSentiments: [], // 情感类型选择值
      senTypeOptions: [
        // 情感类型选项配置
        { value: "Positive", label: "Positive" },
        { value: "Neutral", label: "Neutral" },
        { value: "Negative", label: "Negative" },
      ],
      SenChartOptions: {
        // 情感图表配置（柱状图）
        // 绘图区域布局配置
        grid: {
          top: "10%", // 顶部间距
          left: 5, // 左侧间距
          right: "5%", // 右侧间距
          bottom: "15%", // 底部间距
          containLabel: true, // 包含标签
        },

        // 图例配置
        legend: {
          show: true, // 显示图例
          data: ["Positive", "Neutral", "Negative"],
          top: "bottom", // 位置底部
          left: "center", // 水平居中
          padding: [5, 25], // 内边距
          itemGap: 20, // 项间距
          icon: "circle", // 图标类型
          itemWidth: 10, // 图标宽度
          itemHeight: 10, // 图标高度
          textStyle: { color: "#6a6969", fontSize: 12 }, // 文本样式
        },

        // X轴配置（月份）
        xAxis: {
          boundaryGap: false, // 坐标轴两边不留白
          type: "category", // 分类轴
          data: [
            // 月份数据
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "June",
            "July",
            "Aug",
            "Sept",
            "Oct",
            "Nov",
            "Dec",
          ],
          axisLine: { show: false }, // 隐藏轴线
          axisTick: { show: false }, // 隐藏刻度
          axisLabel: { color: "#232323", fontSize: 10 }, // 标签样式
        },

        // Y轴配置（评论数量）
        yAxis: [
          {
            offset: 5, // 正值向右移动，负值向左
            type: "value",
            axisLabel: {
              align: "right",
              margin: 30, // 增加左边距防止重
              color: "#454545",
              fontSize: 10,
              overflow: "truncate",
              fontWeight: 400, // 可选：加粗（normal/bold）
            },
            name: "#of reviews",
            nameTextStyle: {
              color: "#454545", // 名称字体颜色（例如红色）
              fontSize: 10, // 名称字体大小
              fontWeight: 400, // 可选：加粗
              align: "right",
              verticalAlign: "middle",
              rotate: 270,
              padding: [0, 0, 0, 20],
            },
            min: 0,
            max: 1000,
            interval: 250,
            position: "left",
            splitLine: {
              show: false,
            },
          },
        ],

        // 数据系列配置
        series: [
          {
            name: "Positive", // 系列名称
            stack: "演示柱状图", // 堆叠组
            barCategoryGap: "150%", // 类目间距
            barWidth: 30, // 柱宽
            barGap: 20, // 柱间距离
            data: [400, 300, 100, 200, 300, 300, 230, 290, 200, 100, 230, 230], // 数据
            type: "bar", // 柱状图
            smooth: true, // 平滑曲线
            showSymbol: false, // 不显示标记
            borderRadius: [20, 50, 0, 0], // 圆角
            itemStyle: {
              color: "#2FAA68", // 颜色
              borderRadius: [4, 4, 4, 4], // 圆角
              borderColor: "#fff", // 边框颜色
              borderWidth: 1, // 边框宽度
            },
          },
          {
            name: "Neutral", // 系列名称
            stack: "演示柱状图", // 堆叠组
            borderRadius: [2.76, 2.76, 0, 0], // 圆角
            data: [400, 300, 500, 200, 300, 300, 230, 190, 200, 600, 230, 230], // 数据
            type: "bar", // 柱状图
            smooth: true, // 平滑曲线
            showSymbol: false, // 不显示标记
            itemStyle: {
              color: "#EFB82C", // 颜色
              borderRadius: [4, 4, 4, 4], // 圆角
              borderColor: "#fff", // 边框颜色
              borderWidth: 1, // 边框宽度
            },
          },
          {
            name: "Negative", // 系列名称
            stack: "演示柱状图", // 堆叠组
            borderRadius: [2.76, 2.76, 0, 0], // 圆角
            data: [400, 300, 500, 200, 300, 300, 230, 690, 200, 600, 230, 230], // 数据
            type: "bar", // 柱状图
            smooth: true, // 平滑曲线
            showSymbol: false, // 不显示标记
            label: {
              // 标签配置
              show: true,
              position: "top",
              formatter: "●", // 圆点符号
              color: "#cdcccc",
              fontSize: 8,
              offset: [0, 2],
            },
            itemStyle: {
              color: "#CE4049", // 颜色
              borderRadius: [4, 4, 4, 4], // 圆角
              borderColor: "#fff", // 边框颜色
              borderWidth: 1, // 边框宽度
            },
          },
        ],
      },
    };
  },
  methods: {
    handleSentimentChange(sentiment) {
      // 回调函数名与组件事件保持一致
      console.log("下拉框选中的值是", sentiment);
    },
  },
};
</script>

<style scoped lang="scss">
.Progress-neg-container {
  background: #fff;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 16px 24px;
  border-radius: 8px;
  border: 1px solid #cdcccc;

  .language-select {
    display: flex;
    justify-content: space-between;
  }

  .title {
    font-size: 18px;
    color: #454545;
    font-weight: 600;
  }
}

/* 深度选择器样式（完全保留原有逻辑） */
::v-deep .language-selector .custom-dropdown .dropdown-toggle {
  border: none !important;
  padding: 0;
  height: 17px;
  background-color: transparent;
  justify-content: space-between;
  width: 136px;
}
</style>
